<template>
	<view class="mIcon " :style="[styles]">
		<image @click="click" v-if="isImg" :style="[iconStyle]" :src="isImg" :mode="mode"></image>
		<uni-icons @click="click" v-else :color="color" :size="wh" :style="[iconStyle]" customPrefix="iconfont"
			:type="type"></uni-icons>
	</view>
</template>

<script>
	import mixin from "../../libs/mixin/mixin.js"
	import { mapState } from 'vuex'
	// import mIcon from './mIcon.js'
	export default {
		mixins: [mixin],
		name: "m-icon",
		props: {
			type: {
				type: String,
				default: ''
			},
			wh: {
				//图片模式下  宽高默认30
				//非图片模式  大小默认36 rpx
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: 'var(--text)'
			},
			spa: {
				type: String,
				default: '0'
			},
			rotate: {
				type: [Number, String],
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false, //是否禁止
			},
			mode: '',
		},
		computed: {
			...mapState({
				iconArr: state => state.temporary.iconArr,
			}),
			isImg() {
				return this.iconArr[this.type.toLowerCase()]
			},
			styles() {
				return {
					...this.style,
					"transform": `rotate(${this.rotate}deg)`
				}
			},
			iconStyle() {
				return {
					'width': this.style.width,
					'height': this.style.height,
					"font-size": this.wh + "rpx",
					"color": this.color,
					'font-weight': '500 !important'

				}
			},
		},
		data() {
			return {

			};
		},
		mounted() {},
		methods: {
			click() {
				if (this.disabled) return
				this.$emit('click')
			},
		}
	}
</script>

<style lang="scss">
	.mIcon {
		cursor: pointer;
		position: relative;
		display: inline-block;
		/* #ifdef MP-WEIXIN */
		display: inline-flex;
		// text-align: center;
		overflow: hidden;
		/* #endif */
		justify-content: center;
		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		text{
			display: block;
		}
		/deep/ .uni-icons{
			
		}
		.uni-icons,
		.uni-icons:before {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.rotate180 {
		transform: rotate(180deg);
	}
</style>